<template>
  <v-page style="min-height: 100vh">
    <view class="user-info">
      <view class="bg-light" style="padding: 90rpx 30rpx 70rpx">
        <view class="d-flex align-center">
          <navigator
            animation-type="slide-in-right"
            animation-duration="300"
            url="./proinfo/index"
            class="user-head"
          >
            <user-head class="w-61 h-61"></user-head>
          </navigator>

          <view class="flex-fill m-l-md d-flex align-center p-y-md">
            <view class="info flex-fill">
              <navigator
                animation-type="slide-in-right"
                animation-duration="300"
                url="./proinfo/index"
                class="name color-default fn-20 fn-blod"
              >
                铭辉品牌策划与设计
              </navigator>
              <navigator
                animation-type="slide-in-right"
                animation-duration="300"
                url="./proinfo/index"
                class="msg color-tips fn-15"
              >
                ID：1568798738
              </navigator>
            </view>
            <view class="code fn-18 color-tips iconfont">
              &#xe646;&nbsp;&#xe601;</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="layout-main bg-bg">
      <!-- 零钱 -->
      <navigator url="./money/index" class="u-row-1">
        <view class="bg-light p-md m-y-md">
          <view
            class="d-flex align-center justify-between h-22"
            style="line-height: 22px"
          >
            <view class="d-flex align-center h-22">
              <view class="iconfont fn-20" style="color: #d07200">
                &#xe600;
              </view>
              <view class="txt fn-16 color-default m-l-lg">零钱</view>
            </view>
            <view class="iconfont fn-18 color-tips"> &#xe601; </view>
          </view>
        </view>
      </navigator>

      <navigator
        v-for="item in datas"
        :key="item"
        :url="item.url"
        class="u-row"
      >
        <view class="bg-light p-md border-b">
          <view
            class="d-flex align-center justify-between h-22"
            style="line-height: 22px"
          >
            <view class="d-flex align-center h-22">
              <view
                class="iconfont fn-20"
                v-html="item.ico"
                :style="`color: ${item.color}`"
              >
              </view>
              <view class="txt fn-16 color-default m-l-lg">{{
                item.name
              }}</view>
            </view>
            <view class="iconfont fn-18 color-tips"> &#xe601; </view>
          </view>
        </view>
      </navigator>

      <!-- 设置 -->
      <navigator url="./setting" class="u-row-1">
        <view class="bg-light p-md m-y-md">
          <view
            class="d-flex align-center justify-between h-22"
            style="line-height: 22px"
          >
            <view class="d-flex align-center h-22">
              <view class="iconfont fn-20" style="color: #006ab5">
                &#xe765;
              </view>
              <view class="txt fn-16 color-default m-l-lg">设置</view>
            </view>
            <view class="iconfont fn-18 color-tips"> &#xe601; </view>
          </view>
        </view>
      </navigator>
    </view>
  </v-page>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          name: "收藏",
          url: "./collect",
          ico: "&#xe63b;",
          color: "#186DFF",
        },
        {
          name: "扫一扫",
          url: "./scan",
          ico: "&#xe71d;",
          color: "#D88A03",
        },
        {
          name: "客服",
          url: "./service",
          ico: "&#xe602;",
          color: "#E02B33",
        },
        {
          name: "设备信息",
          url: "./device-info",
          ico: "&#xe615;",
          color: "#20368A",
        },
        {
          name: "用户帮助",
          url: "./help",
          ico: "&#xe728;",
          color: "#ECA710",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.u-row-1,
.u-row {
  width: 100%;
}
.navigator-hover {
  background-color: transparent;
  opacity: 1;

  &.user-head {
    opacity: 0.7;
  }

  &.u-row {
    opacity: 0.7;
  }

  &.u-row-1 {
    > view {
      opacity: 0.7;
    }
  }
}
</style>
